<!-- 方案详情 -->
<template>
  <view class="scheme-detail">
    <view class="header">
      <img v-if="schemeData.bgimages" :src="'https://fh4.qinyuan.cn' + schemeData.bgimages" class="header-img">
      <img v-else src="https://fh4.qinyuan.cn/uploads/view/static/customMode/headerBg.png" class="header-img">

      <view class="scheme-main">
        <view class="title">{{ schemeData.name }}</view>
        <view class="price">总价约：{{ schemeData.prices }}起</view>
      </view>
    </view>

    <view class="describe">
      <view class="title">描述</view>
      <view class="content" v-html="schemeData.desc"></view>
    </view>

    <view class="list" v-for="(item, productIndex) in schemeData.products" :key="productIndex">
      <view class="scheme-item">
        <view class="wrap">
          <view class="title">{{ tempEquipData[productIndex].shop_type || item.series_name }}</view>
          <view class="price">市场参考价：{{ tempEquipData[productIndex].guide_price || item.prices }}</view>
          <view class="bottom">
            <view class="category">{{ tempEquipData[productIndex].products_name || item.name }}</view>
            <view class="toggle" @click="toggleEquip(item.id, productIndex, item.series_id)">
              <img src="../../static/customMode/upArrow.png" class="toggle-icon">
              换一款
            </view>
          </view>
        </view>
        <img v-if="tempEquipData[productIndex].index_images"
             :src="'https://fh4.qinyuan.cn' + tempEquipData[productIndex].index_images" class="image">
        <img v-else :src="'https://fh4.qinyuan.cn' + item.images" class="image">
      </view>

      <view v-if="showSeriesIndex === productIndex" class="toggle-list">
        <view class="add-btn" @click="showAddModal(item.id)">
          <img src="../../static/customMode/increment.png" class="add-icon">
          <view class="add-text">手动添加</view>
        </view>

        <view class="toggle-item" v-for="(item, index) in seriesList" :key="index"
              @click="selectEquip(item, index, productIndex)">
          <img :src="'https://fh4.qinyuan.cn' + item.index_images" class="toggle-icon">
          <view class="toggle-text">{{ item.products_name }}</view>
          <view :class="{ selected: selectedId === item.id, 'not-selected': selectedId !== item.id }">
            <view class="icon" :class="{ 'selected-icon': selectedId === item.id }"></view>
          </view>
        </view>

      </view>
    </view>

    <view class="add-modal-mask" @click.stop="isShowAdd = !isShowAdd" v-if="isShowAdd">

      <view class="add-modal" @click.stop>
        <view class="title">手动添加商品</view>

        <view class="form-label">商品名称</view>
        <view class="form-input">
          <input type="text" class="input" v-model="shopName">
        </view>

        <picker header-text="请选择商品类型" mode="selector" :range="shopTypeList" range-key="name" @change="selectShop">
          <view class="form-label">商品类型</view>
          <view class="form-input">
            <input disabled type="text" placeholderStr="请选择商品类型" class="input" @input="e => shopTypeName = e"
                   :value="shopTypeName">
          </view>
        </picker>

        <view class="form-label">指导价格</view>
        <view class="form-input">
          <input type="number" class="input" v-model="shopPrice">
        </view>

        <view class="form-label">上传图片</view>
        <img :src="temPath || '../../static/customMode/upload.png'" @click.stop="uploadImage" class="upload-icon">

        <view class="append-btn-box">
          <view class="append-btn" @click.stop="handleCancelAdd">取消</view>
          <view class="append-btn" @click.stop="handleAdd">添加</view>
        </view>
      </view>
    </view>
    <view class="hover-btn" @click.stop="downloadSchema">
      <img src="https://fh4.qinyuan.cn/uploads/view/static/load-icon.png" class="icon">
      <view class="text">下载方案</view>
    </view>
  </view>
</template>

<script>
import requestV1 from "../../common/requestV1";
import CustomInput from "../../components/CustomInput/CustomInput.vue";
export default {
  components: { CustomInput },
  data() {
    return {
      seriesId: "",
      shoporId: "", // 商品id
      productIndex: null,
      requestData: null,
      schemeData: {
        products: {}
      },
      seriesList: [],
      shopTypeList: [],
      showSeriesIndex: null,
      selectedId: null,
      schemeIndex: null,
      isShowAdd: false,
      shopName: '',
      shopPrice: '',
      shopTypeName: '',
      image: null,
      imageName: '',
      temPath: '',
      toggleParams: {},
      tempEquipData: {
        0: {},
        1: {},
        2: {},
        3: {},
        4: {},
        5: {},
        6: {},
        7: {},
        8: {},
        9: {},
        10: {},
      }
    }
  },
  onLoad(e) {
    this.requestData = { ...e }
    this.schemeIndex = e.schemeIndex
    this.getSchemeData()
    this.getShopTypeList()
  },
  methods: {
    uploadImage() {
      const _this = this
      uni.chooseImage({
        count: 1,
        success(e) {
          console.log(e, '===e===')
          _this.temPath = e.tempFilePaths[0]
          _this.image = e.tempFiles[0]
        }
      })
      // uni.chooseMedia({
      //   count: 1,
      //   mediaType: 'image',
      //   success(e) {
      //     console.log(e)
      //     _this.temPath = e.tempFiles[0].tempFilePath
      //     // _this.image = e.tempFiles[0].tempFilePath
      //     uni.getFileSystemManager().readFile({
      //       filePath: _this.temPath,
      //       encoding: 'binary',
      //       success: function(res) {
      //         console.log(res)
      //         _this.image = res.data
      //       },
      //       fail: function(error) {
      //         console.log('读取图片失败：', error);
      //       }
      //     })
      //   }
      // })
    },
    async getShopTypeList() {
      const data = await requestV1({
        url: '/casemarks/caseadd_style',
        method: 'get'
      })
      this.shopTypeList = data.data
    },
    selectShop(e) {
      this.shopTypeName = this.shopTypeList[e.detail.value].name
    },
    async handleAdd() {
      if (!this.shopName) {
        uni.showToast({
          icon: 'none',
          duration: 2000,
          title: '请输入商品名称'
        })
        return
      }
      if (!this.shopTypeName) {
        uni.showToast({
          icon: 'none',
          duration: 2000,
          title: '请选择商品类型'
        })
        return
      }
      if (!this.shopPrice) {
        uni.showToast({
          icon: 'none',
          duration: 2000,
          title: '请输入指导价格'
        })
        return
      }
      if (!this.image) {
        uni.showToast({
          icon: 'none',
          duration: 2000,
          title: '请上传商品图片'
        })
        return
      }
      const _this = this
      console.log('s==============')
      uni.uploadFile({
        url: 'https://fh4.qinyuan.cn/api/casemarks/caseadd',
        filePath: this.temPath,
        name: 'images',
        formData: {
          shopor_id: this.shoporId,
          shop_name: this.shopName,
          guide_price: this.shopPrice,
          shop_type: this.shopTypeName,
          report_id: this.schemeData.report_id
        },
        success(e) {
          console.log(_this.toggleParams, '===success===')
          _this.handleCancelAdd()

          const data = JSON.parse(e.data)
          console.log(data, 'data')
          if (data.code == 1) {
            _this.tempEquipData[_this.productIndex] = {
              index_images: data.data.url,
              products_name: data.data.shop_name,
              shop_type: data.data.shop_type,
              id: data.data.id,
              guide_price: data.data.guide_price
            }
            _this.shoporId = data.data.id
            _this.selectedId = null
          }

          // _this.toggleEquip(_this.toggleParams.id, _this.toggleParams.index,_this.seriesId)
          // _this.getSeriesList()
        },
        fail(err) {
          console.log(err, 'err')
        }
      })
    },
    handleCancelAdd() {
      this.shopName = ''
      this.shopTypeName = ''
      this.shopPrice = ''
      this.image = ''
      this.temPath = ''
      this.isShowAdd = false
    },
    showAddModal(id) {
      this.isShowAdd = true
    },
    selectEquip(data, index, productIndex) {
      console.log({ ...data }, '选择设备')
      if (this.selectedId === data.id) return
      uni.showModal({
        content: '是否确认更换？',
        confirmText: '确认',
        success: (res) => {
          if (res.confirm) {
            this.selectedId = data.id
            this.toggleSubmit(data)
            console.log(data, '===data===')
            this.tempEquipData[productIndex] = data
            console.log(this.tempEquipData, data, '临时选中的设备数据')
            uni.showToast({
              icon: 'none',
              duration: 2000,
              title: '替换成功'
            })
          }
        }
      })
    },
    toggleSubmit(data) {
      requestV1({
        url: '/footmarks/shops_update',
        method: 'post',
        data: {
          shop_id: data.id,
          shopor_id: this.shoporId,
          report_id: this.schemeData.report_id,
          // series_id: data.series_id
        }
      })
      this.shoporId = data.id
    },
    async downloadSchema() {
      uni.navigateTo({
        url: '/pages/download/download?report_id=' + this.schemeData.report_id
      })
    },
    // 切换设备 - 点击其他设备的换一款
    async toggleEquip(id, index, series_id) {
      this.productIndex = index
      this.seriesId = series_id
      this.shoporId = id
      this.toggleParams.id = id
      this.toggleParams.index = index
      if (this.showSeriesIndex !== null && this.showSeriesIndex === index) {
        this.showSeriesIndex = null
        return
      }
      this.showSeriesIndex = index
      await this.getSeriesList()
    },
    // 获取方案信息
    async getSchemeData() {
      const data = await requestV1({
        url: '/footmarks2/plan_sumbit',
        method: 'post',
        data: this.requestData
      })
      if (data.code === 1) {
        this.schemeData = data.data[this.schemeIndex]
        console.log({ ...this.schemeData }, 'this.schemeData')
      }
    },
    // 获取换一款列表数据
    async getSeriesList() {
      this.seriesList=[]
      const data = await requestV1({
        url: '/footmarks/shops_series',
        method: 'post',
        data: { series_id: this.seriesId },
      })
      if (data.code === 1) {
        this.seriesList = data.data[0]
        console.log(data.data[0], 'data.data')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-input {
  width: calc(100% - 72rpx);
  margin-left: 36rpx;
}

.add-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 998;
  background-color: rgb(0, 0, 0, 0.5);
}

.add-modal {
  position: fixed;
  width: 100%;
  height: 1020rpx;
  bottom: 0;
  z-index: 999;
  border: 7rpx solid;
  border-color: rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.38) transparent rgba(0, 0, 0, 0.38);
  border-radius: 110rpx 110rpx 0 0;
  margin-left: -7rpx;
  background-color: #fff;

  .title {
    color: rgba(0, 0, 0, 1);
    line-height: 126rpx;
    font-size: 43rpx;
    text-align: center;
  }

  .form-label {
    padding-left: 36rpx;
    color: rgba(26, 26, 26, 1);
    font-size: 25rpx;
    line-height: 72rpx;
    font-weight: bold;
  }

  .form-input {
    border: 1rpx solid rgba(163, 163, 163, 1);
    border-radius: 24rpx;
    width: calc(100% - 72rpx);
    height: 90rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .input {
      width: 92%;
      margin: 0 auto;
    }
  }

  .upload-icon {
    margin-left: 36rpx;
    width: 150rpx;
    height: 150rpx;
    background-size: cover;
  }

  .append-btn-box {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .append-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    background-color: rgba(55, 68, 134, 1);
    margin: 36rpx 10px 0;
    text-align: center;
    color: #fff;
    font-size: 29rpx;
    border-radius: 36rpx;
  }
}

.scheme-detail {
  width: 100%;
  padding-top: 36rpx;
  padding-bottom: 36rpx;
  background-color: rgb(250, 250, 250);
  min-height: calc(100vh - 36rpx);

  .header {
    position: relative;
    width: calc(100% - 72rpx);
    height: 439rpx;
    background-size: cover;
    margin: 0 auto 28rpx;

    .header-img {
      width: 100%;
      height: 100%;
      border-radius: 43rpx;
    }

    .scheme-main {
      position: absolute;
      bottom: 3%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 648rpx;
      height: 115rpx;
      border-radius: 25rpx;
      background-color: rgba(250, 250, 250, 1);
      padding-left: 36rpx;
      box-sizing: border-box;

      .title {
        font-size: 35rpx;
        line-height: 60rpx;
        font-weight: bold;
        color: rgba(26, 26, 26, 1);
      }

      .price {
        font-size: 25rpx;
        line-height: 36rpx;
        font-weight: bold;
        color: rgba(0, 150, 136, 1);
      }
    }
  }

  .describe {
    width: calc(100% - 72rpx);
    margin: 0 auto 28rpx;

    .title {
      font-size: 25rpx;
      line-height: 42rpx;
      font-weight: bold;
      color: rgba(26, 26, 26, 1);
    }

    .content {
      line-height: 50rpx;
      font-size: 21rpx;
      color: rgba(26, 26, 26, 1);
      font-weight: 500;
    }
  }

  .list {
    width: calc(100% - 72rpx);
    margin: 0 auto;

    .scheme-item {
      position: relative;
      height: 313rpx;
      background-color: #fff;
      border-radius: 29rpx;
      padding-top: 54rpx;
      box-sizing: border-box;
      margin-bottom: 36rpx;
      display: flex;

      .wrap {
        width: 432rpx;

        .title {
          padding: 0 36rpx;
          font-size: 36rpx;
          line-height: 58rpx;
          color: rgba(20, 19, 18, 1);
          font-weight: bold;
        }

        .price {
          margin: 12rpx 0 12rpx;
          padding: 0 36rpx;
          font-size: 31rpx;
          line-height: 54rpx;
          color: rgba(20, 19, 18, 0.45);
        }

        .bottom {
          padding-left: 36rpx;
          display: flex;
          margin-top: 36rpx;

          .category {
            text-align: center;
            width: 244rpx;
            height: 54rpx;
            line-height: 54rpx;
            font-size: 24rpx;
            padding: 12rpx, 21rpx, 12rpx, 21rpx;
            color: rgba(20, 19, 18, 1);
            background-color: rgba(245, 245, 245, 1);
            border-radius: 18rpx;
            margin-right: 36rpx;
            box-sizing: border-box;
          }

          .toggle {
            width: 137rpx;
            height: 54rpx;
            line-height: 54rpx;
            font-size: 21rpx;
            background-color: rgba(55, 68, 134, 1);
            border-radius: 13rpx;
            color: #fff;
            display: flex;
            align-items: center;

            .toggle-icon {
              width: 20rpx;
              height: 8rpx;
              margin: 0 12rpx 0 24rpx;
            }
          }
        }
      }

      .image {
        position: absolute;
        right: 58rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 176rpx;
        height: 217rpx;
      }
    }

    .toggle-list {
      width: 100%;
      display: flex;
      margin-bottom: 36rpx;
      overflow: auto;
      flex-wrap: nowrap;

      .add-btn {
        min-width: 178rpx;
        height: 209rpx;
        background-color: #fff;
        margin-right: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 18rpx;

        .add-icon {
          width: 128rpx;
          height: 128rpx;
        }

        .add-text {
          color: rgba(77, 77, 77, 1);
          font-size: 18rpx;
        }
      }

      .toggle-item {
        position: relative;
        min-width: 178rpx;
        height: 209rpx;
        margin-right: 36rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 18rpx;
        background-color: #fff;

        .toggle-icon {
          width: 94rpx;
          height: 152rpx;
        }

        .toggle-text {
          color: rgba(77, 77, 77, 1);
          font-size: 18rpx;
        }

        .not-selected {
          position: absolute;
          right: 12rpx;
          top: 12rpx;
          width: 29rpx;
          height: 29rpx;
          background: url("../../static/customMode/notSelected.png");
          background-size: cover;

          .icon {
            display: none;
          }
        }

        .selected {
          position: absolute;
          right: 12rpx;
          top: 12rpx;
          width: 29rpx;
          height: 29rpx;
          background: url("../../static/customMode/selectedBg.png");
          background-size: cover;

          .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20rpx;
            height: 18rpx;
            background: url("../../static/customMode/selected.png") !important;
            background-size: cover;
          }
        }
      }

      .active {
        background-color: rgba(240, 240, 240, 1);
      }
    }
  }
}

.hover-btn {
  position: fixed;
  bottom: 150rpx;
  right: 40rpx;
  border-radius: 24rpx;
  width: 104.4rpx;
  height: 104.4rpx;
  background-color: rgba(55, 68, 134, 1);
  text-align: center;
  padding: 14rpx 4rpx 0;
  box-sizing: border-box;

  .icon {
    width: 45rpx;
    height: 45rpx;
  }

  .text {
    color: #fff;
    font-size: 18rpx;
  }
}

.selected-icon {
  background: url("../../static/customMode/selected.png") !important;
}
</style>
